<template>
    <el-dropdown class="theme">
        <span>
            <el-icon>
                <MagicStick/>
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in options" :key="item.value" @click="handleDark(item.value)">{{ item.label }}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
  </el-dropdown>
</template>
<script setup>
import { ref } from 'vue'
const handleDark = (e)=>{
    if(!e){
        document.documentElement.classList.remove('dark')
    }else{
        document.documentElement.classList.add(e)
    }
    
}

const options = ref([
    {
        value: '',
        label: '默认'
    },
    {
        value: 'dark',
        label: '黑暗'
    }
])
</script>
<style scoped>
.theme{
    width: 25px;
    height: 25px;
    position: relative;
    /* position: absolute; */
    right: 20px;
    top: 8px;
}
.el-icon{
    width: 25px;
    height: 25px;
    svg{
        width: 25px;
        height: 25px;
    }
}
</style>